<template>
    <div class="media">
        <div class="banner">
            <div class="img">
                <img src="./img/1ping-beijing.png" alt="" />
            </div>
        </div>
        <div class="stock">
            <div class="back">
                <ul class="ul1">
                    <li v-for="(item, i) in banner2HeadData" :key="i" @click="(isHeadActive = i), (next = true)">
                        <span :class="isHeadActive === i ? 'primary_color' : ''">{{ item }}</span
                        ><transition name="fade">
                            <div v-show="isHeadActive === i" :class="isHeadActive === i && 'active-line'"></div>
                        </transition>
                    </li>
                </ul>
                <div :style="isHeadActive === i ? {} : { position: 'absolute' }" class="animation-box" v-for="(item, i) in animationImgs" :key="i">
                    <img v-if="isHeadActive === i" :src="item.back" alt="" />
                    <div v-if="isHeadActive === i" class="img-box">
                        <div v-for="(it, ii) in item.imgs" :key="ii">
                            <animation :it="it" @next="nextCtrl" :nextImg="nextImg" />
                        </div>
                    </div>
                </div>
                <div class="tip">— 标准广告位 变现量级大 —</div>
            </div>
        </div>
        <div class="Efficient">
            <hover-list :list="banner3Data" />
        </div>
        <div class="fiee">
            <div
                :class="banner4HoverIndex === i ? 'income income-hover' : 'income'"
                v-for="(item, i) in banner4Data"
                :key="i"
                @mouseenter="banner4HoverIndex = i"
            >
                <div class="magi">
                    <img :src="item.img" alt="" />
                </div>
                <div class="padd">
                    <h4 class="h4">{{ item.name }}</h4>
                    <p>{{ item.des }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import animation from "./Animation";
export default {
    data() {
        return {
            isHeadActive: 0,
            banner4HoverIndex: 1,
            next: false,
            nextImg: false,
            banner2HeadData: ["标准广告位", "非标运营位", "固定运营位"],
            animationImgs: [
                {
                    back: require("./img/a1/2p-chatu1.png"),
                    imgs: [
                        {
                            src: require("./img/a1/01.png"),
                            next: require("./img/a1/001.png"),
                            position: ""
                        },
                        {
                            src: require("./img/a1/02.png"),
                            next: require("./img/a1/002.png"),
                            position: ""
                        },
                        {
                            src: require("./img/a1/03.png"),
                            next: require("./img/a1/003.png"),
                            position: ""
                        },
                        {
                            src: require("./img/a1/04.png"),
                            next: require("./img/a1/004.png"),
                            position: { top: "49%" }
                        }
                    ]
                },
                {
                    back: require("./img/a2/2p-chatu2.png"),
                    imgs: [
                        {
                            src: require("./img/a2/01.png"),
                            next: require("./img/a2/001.png"),
                            position: { top: "47%" }
                        },
                        {
                            src: require("./img/a2/02.png"),
                            next: require("./img/a2/002.png"),
                            position: ""
                        },
                        {
                            src: require("./img/a2/03.png"),
                            next: require("./img/a2/003.png"),
                            position: {
                                top: "14rem",
                                left: "6.5rem",
                                width: "3rem"
                            }
                        },
                        {
                            src: require("./img/a2/04.png"),
                            next: require("./img/a2/004.png"),
                            position: {
                                left: "7.2rem",
                                top: "5.8rem",
                                width: "2rem"
                            }
                        }
                    ]
                },
                {
                    back: require("./img/a3/2p-chatu3.png"),
                    imgs: [
                        {
                            src: require("./img/a3/01.png"),
                            next: require("./img/a3/001.png"),
                            position: { top: "67%" }
                        },
                        {
                            src: require("./img/a3/03.png"),
                            next: require("./img/a3/003.png"),
                            position: {
                                left: "7.5rem",
                                width: "1.5rem"
                            }
                        },
                        {
                            src: require("./img/a3/04.png"),
                            next: require("./img/a3/004.png"),
                            position: { top: "54%" }
                        },
                        {
                            src: require("./img/a3/05.png"),
                            next: require("./img/a3/005.png"),
                            position: { top: "30%" }
                        }
                    ]
                }
            ],
            banner3Data: [
                {
                    name: "便携接入",
                    des: "支持SDK、API等合作形式，提供整合型轻量级SDK，并实现云端低频更新。",
                    img: require("./img/3ping-icon-nianjiejieru.png"),
                    hoverImg: require("./img/3ping-icon-nianjiejieru-Hover.png")
                },
                {
                    name: "技术支持保障",
                    des: "提供完整的技术文档、技术咨询服务和自助测试平台等，为双方合作提供了强大的技术支持保障。",
                    img: require("./img/3ping-icon-jishuzhiyuan.png"),
                    hoverImg: require("./img/3ping-icon-jishuzhiyuan-Hover.png")
                },
                {
                    name: "提供一站式管理平台",
                    des: "支持接入多版本APP、多种广告形式资源，提供多维度数据报表，便于媒体对整个交易流程有更多的了解和控制。",
                    img: require("./img/3ping-icon-tugongyizhanshi.png"),
                    hoverImg: require("./img/3ping-icon-tugongyizhanshi-Hover.png")
                }
            ],
            banner4Data: [
                {
                    name: "多种流量合作模式",
                    des: "支持托管、直投、聚合等主流模式，可根据媒体需求灵活组合，实现每个流量的充分曝光以及收益最大化，全面实现媒体的高填充率及高收益。",
                    img: require("./img/4ping-icon-duozhong.png")
                },
                {
                    name: "更多预算",
                    des: "基于Top Ad精准定向用户和实时场景捕捉能力，使每次广告曝光更有价值，通过提升广告主ROI获取广告主更多预算资源，可对媒体进行更多分成。",
                    img: require("./img/4ping-icon-gengduoyusuan.png")
                },
                {
                    name: "额外回报",
                    des: "合作伙伴与Top Ad共同成长，流量越优质，回报越丰厚。",
                    img: require("./img/4ping-icon-ewaihuibao.png")
                }
            ]
        };
    },
    components: {
        animation
    },
    mounted() {},

    computed: {},

    methods: {
        nextCtrl(data) {
            this.nextImg = data;
        }
    }
};
</script>

<style lang="less" scoped>
.media {
    margin: auto;
    .banner {
        height: 1080px;
        background-color: #010210;
    }
    .img > img {
        width: 1639px;
        height: 1068px;
    }
    .home {
        width: 100%;
        background-color: @primary_color;
    }

    .back {
        height: 1080px;
        background-image: url(./img/2ping-beijing.png);
        background-size: cover;
        background-repeat: no-repeat;
        .center();
        flex-direction: column;
        .tip {
            font-size: 24px;
            margin-top: 60px;
            color: #2d2d2d;
        }
    }

    .ul1 {
        margin-top: 130px;
        .center();
        width: 596px;
        justify-content: space-between;
        li {
            cursor: pointer;
            position: relative;
            font-size: 30px;
            line-height: 1.6;
            letter-spacing: 0.75px;
            text-align: left;
            .center();
            .active-line {
                bottom: -15px;
            }
        }
    }

    .animation-box {
        margin-top: 80px;
        position: relative;
        > img {
            width: 1092px;
        }
        .img-box {
            position: absolute;
            width: 1092px;
            height: 504px;
            padding: 57px 39px 105px 39px;
            .center();
            justify-content: space-between;
            top: 0;
            left: 0;
            z-index: 100;
            > div {
                width: 198px;
                height: 341px;
                position: relative;
                img {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .top {
                top: 0;
            }
        }
    }

    .Efficient {
        height: 1080px;
        background: url("./img/3ping-beijing.png");
        background-size: cover;
        background-color: #0b0b0b;
        position: relative;
    }

    .body {
        margin: auto;
        text-align: left;
        overflow: hidden;
        font-size: 18px;
        line-height: 2;
        letter-spacing: normal;
        text-align: justify;
        color: #ffffff;
        height: 1080px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .body > li > img {
        margin: 0 auto;
        margin-top: 35px;
        width: 90px;
    }

    .h3 {
        font-size: 24px;
        color: #ffffff;
        margin-top: 35px;
    }

    .body > li {
        width: 300px;
        height: 440px;
        background: rgba(0, 0, 0, 0.5);
        background-color: #01040e;
        float: left;
        .center();
        flex-direction: column;
        justify-content: flex-start;
        p {
            margin-top: 30px;
        }
        padding: 0 34px;
    }

    .body li:nth-child(2) {
        margin-left: 20px;
        margin-right: 20px;
    }
    .body > p {
        width: 230px;
        height: 160px;
        font-size: 18px;
        line-height: 2;
        color: #ffffff;
    }
    .Efficient {
        width: 100%;
    }
    .fiee {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        height: 1080px;
        width: 100%;
        overflow: hidden;
        background-size: cover;
        background-image: url("./img/4ping-beijing.png");
        .income {
            width: 380px;
            height: 450px;
            box-shadow: 1.9px 15.9px 43px 0 #b6b6b6;
            background-color: #ffffff;
            transition: all 0.5s;
        }
        & .income:nth-of-type(2) {
            margin-right: 20px;
            margin-left: 20px;
        }
    }
    .income-hover {
        width: 400px !important;
        height: 470px !important;
        h4 {
            color: @primary_color!important;
        }
    }
    .fiee > img {
        margin-top: 20px;
        display: block;
    }
    .magi {
        height: 132px;
        background-color: #f7f8f8;
        .center();
    }
    .padd {
        background-color: white;
    }
    .padd > p {
        font-size: 18px;
        text-align: justify;
        line-height: 2;
        width: 320px;
        margin: 0 auto;
        text-align: left;
        color: #8a8a8a;
    }
    .padd > h4 {
        margin: 50px auto;
        height: 24px;
        line-height: 1.5;
        color: #535353;
        font-size: 24px;
    }

    .tail {
        height: 85px;
        color: white;
        background: #0b0b0b;
    }
    .tail > img {
        margin-right: 65%;
        height: 35%;
        margin-top: 30px;
    }
    .tail > h4 {
        margin-top: -30px;
    }
}
</style>
